<!DOCTYPE html>
<html class="x-admin-sm">

    <head>
        <meta charset="UTF-8">
        <title>供应商-修改</title>
        <meta name="renderer" content="webkit">
        <link rel="stylesheet" href="../../css/font.css"/>
        <link rel="stylesheet" href="../../css/xadmin.css"/>
        <script src="../../lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../js/xadmin.js"></script>
        <script src="../../js/vue2.7min.js"></script>
        <script src="../../js/axios.min.js"></script>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form" id="app">


                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label">
                            <span class="x-red">*</span>请输入想要修改的目标id</label>
                        <div class="layui-input-inline">
                            <input type="text"
                                   class="layui-input"
                                   v-model="id"></div>
                        <div class="layui-form-mid layui-word-aux" @click="getManagerInfo">点我可以查询目标信息</div>
                    </div>


                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label">
                            <span class="x-red">*</span>用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="L_username" required="" lay-verify="name" autocomplete="off"
                                   class="layui-input"
                                   v-model="name"></div>
                        <div class="layui-form-mid layui-word-aux">2到20个字符</div>
                    </div>


                    <div class="layui-form-item">
                        <label for="L_pass" class="layui-form-label">
                            <span class="x-red">*</span>密码</label>
                        <div class="layui-input-inline">
                            <input type="text" id="L_pass" name="pass" required="" lay-verify="pass"
                                   autocomplete="off" class="layui-input"
                                   v-model="password"></div>
                        <div class="layui-form-mid layui-word-aux">6到20个字符</div>
                    </div>


                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label">
                            <span class="x-red">*</span>真实姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" required="" lay-verify="realName" autocomplete="off"
                                   class="layui-input"
                                   v-model="realName"></div>
                        <div class="layui-form-mid layui-word-aux">2到20个字符</div>
                    </div>


                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label">
                            <span class="x-red">*</span>性别</label>
                        <div class="layui-input-inline">
                            <input type="text" required="" lay-verify="sex" autocomplete="off"
                                   class="layui-input"
                                   v-model="sex"></div>
                        <div class="layui-form-mid layui-word-aux">男/女</div>
                    </div>


                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label">
                            <span class="x-red">*</span>手机</label>
                        <div class="layui-input-inline">
                            <input type="text" required="" lay-verify="phone" autocomplete="off"
                                   class="layui-input"
                                   v-model="phone"></div>
                        <div class="layui-form-mid layui-word-aux">11位电话</div>
                    </div>


                    <div class="layui-form-item">
                        <label for="L_username" class="layui-form-label">
                            <span class="x-red">*</span>状态</label>
                        <div class="layui-input-inline">
                            <input type="text" required="" lay-verify="status" autocomplete="off"
                                   class="layui-input"
                                   v-model="status"></div>
                        <div class="layui-form-mid layui-word-aux">启用 1/禁用 0</div>
                    </div>


                </form>
            </div>
        </div>
        <div class="layui-form-item" id="app1">
            <label class="layui-form-label"></label>
            <button class="layui-btn" lay-submit="" @click="edit">修改</button>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#app",
                data: {
                    //管理员信息
                    id: null,
                    name: null,
                    level: null,
                    password: null,
                    phone: null,
                    realName: null,
                    sex: null,
                    status: null,
                    createTime: null,
                    updateTime: null,
                    createUser: null,
                    updateUser: null
                    //分页属性

                },
                methods: {
                    getManagerInfo(){
                        var jsonData={id:vm.id};
                        axios.post("../../../manager/getOneById1",jsonData)
                            .then(function (response) {
                                //数据保存到vue全局
                                if (response.data.code === 1) {
                                    vm.id = response.data.data.id;
                                    vm.name = response.data.data.name;
                                    vm.level = response.data.data.level;
                                    vm.phone = response.data.data.phone;
                                    vm.realName = response.data.data.realName;
                                    vm.sex = response.data.data.sex;
                                    vm.createTime = response.data.data.createTime;
                                    vm.updateTime = response.data.data.updateTime;
                                    vm.createUser = response.data.data.createUser;
                                    vm.updateUser = response.data.data.updateUser;
                                }
                            }, function (err) {
                                console.log(err);

                            })
                    }
                },
                mounted: function () {

                }, created: function () {
                    //从后台查询数据
                    //根据id获取账号信息。判断身份，展示不同页面信息




                }
            });
            var vm1 = new Vue({
                el: "#app1",
                methods: {
                    edit() {
                        //首先校验数据合法性
                        if (vm.name === null || vm.name === "" || vm.name.length < 2 || vm.name.length > 20) {
                            layer.alert("用户名不可为空且长度在[2-20]哦", {
                                icon: 6
                            })
                        } else if (vm.password === null || vm.password === "" || vm.password.length < 6 || vm.password.length > 20) {
                            layer.alert("密码不可为空且长度在[6-20]哦", {
                                icon: 6
                            })
                        } else if (vm.realName === null || vm.realName === "" || vm.realName.length < 2 || vm.realName.length > 20) {
                            layer.alert("真实姓名不可为空且长度在[2-20]哦", {
                                icon: 6
                            })
                        } else if (vm.sex === null || vm.sex === "" || (vm.sex !== "男" && vm.sex !== "女")) {
                            layer.alert("性别只可以男/女哦", {
                                icon: 6
                            })
                        } else if (vm.phone === null || vm.phone === "" || vm.phone.length !== 11) {
                            layer.alert("电话11位哦", {
                                icon: 6
                            })
                        } else if (vm.status === null || vm.status === "" || (vm.status !== "1" && vm.status !== "0")) {
                            layer.alert("状态只可以1/0哦", {
                                icon: 6
                            })
                        } else if(vm.id===1){
                            layer.alert("超级管理员账号不可以修改哦", {
                                icon: 6
                            })
                        } else {
                            console.log("开始上传数据");                      //开始axios通信
                            var jsonData = {
                                id:vm.id,
                                name: vm.name,
                                level: vm.level,
                                phone: vm.phone,
                                password: vm.password,
                                realName: vm.realName,
                                sex: vm.sex,
                                createTime: vm.createTime,
                                updateTime: vm.updateTime,
                                createUser: vm.createUser,
                                updateUser: vm.updateUser
                            }
                            axios.post("../../../manager/editById", jsonData)
                                .then(function (response) {
                                    //数据保存到vue全局
                                    if (response.data.code === 1) {
                                        layer.alert("数据修改成功", {
                                            icon: 6
                                        })
                                    }
                                }, function (err) {
                                    console.log(err);

                                })
                        }


                    }
                }
            })
        </script>
    </body>

</html>